import { Switch } from 'antd'
import { colors } from '@/desktop/styles'
import { getEnableNotify, setEnableNotify } from '@/lib/notify'

export function Notify() {
  const [enable, rawSetEnable] = useState(getEnableNotify())
  function setEnable(enable: boolean) {
    rawSetEnable(enable)
    setEnableNotify(enable)
  }

  return <>
    <h5>通知</h5>
    <div css={styles.field}>
      <label className="settings-label">开启声音通知：</label>
      <Switch
        checked={enable}
        onClick={() => setEnable(!enable)}
        checkedChildren="开启"
        unCheckedChildren="关闭"
      />
    </div>
    <div css={styles.tips}>
      注意：
      <br />
      1. 因浏览器安全限制，必须与网页有过交互（例如点击过任意地方）才能播放声音。
      <br />
      2. 网页处于后台状态太久，也可能被浏览器休眠，导致无法播放声音。
    </div>
  </>
}

const styles = {
  field: css`
    align-items: center;
    display: flex;
    margin-bottom: 12px;
    label {
      width: 7em;
    }
  `,
  tips: css`
    color: ${colors.gray};
  `,
}
